$blue: #1473E6 !default; // 主题配色
$red: #f55959; // 错误配色
$green: #1cc336;
$font-color: #262626 !default; // 默认字体颜色
$placeholder-color: #90919d;

$border-color: #DDE4EB !default; // 默认边框色

$gray-background-color: #f7f8fb;

$font-sans: "Chinese Quote",
"-apple-system",
"BlinkMacSystemFont",
"Segoe UI",
"Roboto",
"PingFang SC",
"Hiragino Sans GB",
"Microsoft YaHei",
"Helvetica Neue",
"Helvetica",
"Arial",
"sans-serif";
$font-size: 14px !default; // 默认字体大小
$large-font-size: 16px;
$small-font-size: 12px;

$space-beside: 25px; // 页面两边的距离
$space-beside-has-left: 25px; // 左边有一块的main页面两边的距离

$app-bar-height: 50px; // 项目标题栏高度
$block-distance: 20px; // 页面相邻板块的间距

$batch-ctrl-bar-height: 40px;
$batch-ctrl-bar-padding-top: 15px;

$common-footer-height: 75px;

$img-base-url: "~@/assets/";
// $img-base-url:"~basic-data/src/assets/";

@mixin shadow-default {
    // box-shadow: 0 3px 8px 0 rgba(28, 58, 96, 0.25);
}

@mixin gradient-default {
    background-image: linear-gradient(90deg, #457ff4 0%, $blue 100%);
}

/* 一般左右布局页面背景 */
@mixin left-main-bg {
    background: linear-gradient(90deg, #f7f8fb 279px, #c2d0e0 280px, #fff 280px);
}

@mixin btn($font-color, $border-color, $background) {
    padding: 0 15px;
    font-size: $font-size;
    color: $font-color;
    letter-spacing: 1px;
    border: 1px solid $border-color;
    border-radius: 2px;
    background: $background;
}

@mixin btn-blue($width: 100px, $height: 35px) {
    @include btn(#fff, transparent, $blue);
    width: auto;
    height: $height;
}

@mixin btn-white($width: 100px, $height: 35px) {
    @include btn($font-color, #d0dae3, #fff);
    width: auto;
    height: $height;
}

@mixin btn-red($width: 100px, $height: 35px) {
    @include btn(#fff, transparent, $red);
    width: auto;
    height: $height;
}

@mixin btn-transparent($width: 100px, $height: 35px) {
    @include btn($blue, transparent, transparent);
    width: auto;
    height: $height;
}

@mixin btn-with-icon {
    display: inline-flex; //  为了使内部的图标能够垂直居中采用 Flex 布局
    justify-content: center;
    align-items: center;
}

@mixin input {
    width: 240px;
    height: 35px;
    padding: 0 10px;
    font-size: $font-size;
    color: $font-color;
    letter-spacing: 1px;
    border: 1px solid $border-color;
    border-radius: 2px;
}

@mixin input-focus {
    outline: 0;
    box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.2);
}

@mixin input-disabled {
    color: #606367;
    border: 1px solid $border-color;
    background: $gray-background-color;
    opacity: 0.5;
    cursor: not-allowed;
}

@mixin textarea($width: 300px, $height: 50px) {
    width: $width;
    height: $height;
    padding: 3px 10px;
    vertical-align: top;
    letter-spacing: 1px;
    border: 1px solid $border-color;
    border-radius: 2px;
    background-color: $gray-background-color;
}

@mixin checkbox-wrapper {
    width: 14px;
    height: 14px;
    border: 1px solid #b9bed1;
    border-radius: 2px;
}

@mixin checkbox-inner {
    width: 8px;
    height: 8px;
    background: $green;
}

@mixin radio-wrapper {
    width: 14px;
    height: 14px;
    border: 1px solid #b9bed1;
    border-radius: 50%;
}

@mixin radio-inner {
    width: 10px;
    height: 10px;
    background: $green;
    border-radius: 50%;
}

@mixin bgi-contain($name) {
    background: url($img-base-url+$name) no-repeat center;
    background-size: contain;
}

@mixin bgi-full($name) {
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 100%;
    background-image: url($img-base-url+$name);
}

@mixin bgi-cover($name) {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-image: url($img-base-url+$name);
}

@mixin bgi-center($name) {
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url($img-base-url+$name);
}

@mixin ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
